<!DOCTYPE html>
<html lang="zh-CN">
{% load static %}
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>登录</title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="shortcut icon" href="{% static 'img/logo.png' %}">
    <style>
        body{
            width: 100%;
            height: calc(100vh);
            {#background: url("{% static 'img/bg-01.jpg' %}")no-repeat;#}
            {#background-size: cover;#}
        }
        #main{
            position: fixed;
            width: 395px;
            background: #fff;
            /* border: 1px solid #eee; */
            top: 50%;
            left: 50%;
            margin-top: -207px;
            margin-left: -197.5px;
            /* border-radius: 5px; */
        }
        .has-feedback .form-control {
            padding-right: 12px;
        }
        .input-group{
            width: 100%;
        }
.login-top {
    font-size: 24px;
    margin-top: 30px;
    padding-left: 40px;
    box-sizing: border-box;
    color: #333333;
    margin-bottom: 20px;
    display: flex;
    padding-right: 40px;
    justify-content: space-between;
    align-items: center;
}
.login-center {
    width: 100%;
    box-sizing: border-box;
    padding: 0 40px;
    margin-bottom: 20px!important;
}
.login-button {
    cursor: pointer;
    width: 313px;
    text-align: center;
    height: 40px;
    background-color: dodgerblue;
    border-radius: 5px;
    margin: 0 40px;
    color: white;
}
        .login-button:hover{
            color: white;
        }
    {#    p{#}
    {#       width: 370px;#}
    {#padding: 20px 40px;#}
    {#display: flex;#}
    {#justify-content: space-between;#}
    {#    }#}
        a{
            text-decoration: none;
            color: #333;
        }
        a:hover{
            text-decoration: none;
            color: #333;
        }
        .error{
            font-size: 14px;
            color: red;
            position: relative;
            left: 40px;top: -10px;
        }
        #main>p{
            margin: 20px 40px;
        }
        #main>p>.fl{
            float: left;
        }
        #main>p>.fr{
            float: right;
        }
    </style>
</head>

<body>
<div style="height: calc(65vh);background:#128ff9;">
    <h2>  </h2>
    <div id="main">
     <form class="form-inline" action="{% url 'index' %}?next={{ next }}" method="post">
         <div class="login-top">
				登录 <a href="{% url 'home' %}" style="font-size: 14px;">首页</a>
			</div>
      <div class="form-group login-center">

        <div class="input-group">
          <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i></div>
            {% csrf_token %}
          <input type="text" required class="form-control" name="telephone" placeholder="请输入邮箱">
        </div>
      </div>
       <div class="form-group login-center">

        <div class="input-group">
          <div class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></div>
          <input type="password"required class="form-control" name="password" placeholder="请输入密码">
        </div>
            <div style="margin-top:20px;">
                <input type="checkbox" value="1" name="remember" >记住我
           </div>
      </div>

         <span class="error">{{ error }}</span>
  <button type="submit" class="btn login-button" id="login">登录</button>
         <div class="qq" style="padding-left: 40px;padding-top: 10px;">
             其他登录: <a href="{% url 'qq-login' %}?next={{ next }}"><img style="width: 25px;" src="{% static 'img/qq2.png' %}" alt="QQ登录"></a>
         </div>

</form>
    <p class="clearfix"><a class="fl" href="{% url 'user:retrieve ' %}">忘记密码?</a><a class="fr" href="{% url 'register' %}">注册</a></p>
</div>
</div>
<div style="height: calc(35vh);background: #fff;"></div>

	<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
<script src="{% static 'js/jquery.cookie.min.js' %}"></script>
<script>
   /* $(function () {
    $("#login").on('click',function () {
        var tel = $("input[name='telephone']").val()
        var pass = $("input[name='password']").val()
        var remember =$("input[name='remember']").prop('checked')
         $.ajax({
            url:'/login/',
            type:'post',
            data:{telephone:tel,password:pass,remember:remember?1:0,csrfmiddlewaretoken: '{{ csrf_token }}'},
            success:function (data) {
                console.log(data)
                if (data.code==200){
console.log(data)
                    //window.location.href='/'
                }else {
                    $('.error').text('登录失败,请检查后再登录')
                }
            },
            error:function (err) {
                console.log(err)
            }
        })
    })
})*/
</script>
</body>

</html>